@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&display=swap');

.coralHeader{background-color: #FADDCC;color: #FADDCC;}
.blueHeader{background-color: #D4E2EB;}
.pinkHeader{background-color: #FFEFEA;}
.greenLeft{background-color: #CFFDBC;width: 15%;}
.suedeCenter{background-color: #ECDEC9;width: 70%;height: auto;aspect-ratio: 686/868; color: #ECDEC9;}
iframe{width: 100%;height: auto;aspect-ratio: 686/808;}
.yellowRight{background-color: #FFFFBF;width: 15%;}
.pinkFooter{background-color: #FFEFEA;color: #FFEFEA;}
.coralFooter{background-color: #FADDCC;color: #FADDCC;}
.violetBody{background-color: #E6E6FA;}

*, *::before, *::after {text-align: center;text-wrap: wrap;font-size: 2.14vw;font-weight: 686;box-sizing:     border-box;     font-family:     'Cinzel', "Century Schoolbook","Times New Roman", Times, Courier,"Georgia", serif;    text-decoration: none;   }
#sliderproject10{background-color: #ECDEC9}





.chestnutText{color: #79443B;}
.sanguineText{color: #961906;}
.hazelText{color: #508E29;}

/* 

        [References]                    [https://developer.mozilla.org/en-US/docs/Web/CSS/color]
                                        [https://www.w3schools.com/css/css3_flexbox_container.asp]
                                        [https://developer.mozilla.org/en-US/docs/Web/CSS/flex]
                                        [https://developer.mozilla.org/en-US/docs/Web/CSS/color]
                                        [https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_column]
                                        [https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_row]
                                        [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox]
                                        [https://www.w3schools.com/bootstrap5/index.php#gsc.tab=0&gsc.q=carousel]
                                        [https://www.w3schools.com/tags/tag_span.asp]
                                        [https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap]
                                        [https://www.w3schools.com/bootstrap5/bootstrap_carousel.php]
                                        [https://dictionary.cambridge.org/us/dictionary/english/if-worse-worst-comes-to-worst]
                                        [https://www.w3schools.com/bootstrap5/bootstrap_carousel.php]
                                        [https://www.w3schools.com/css/css_align.asp]
                                        [https://www.thinkful.com/blog/whats-the-difference-between-html-vs-php/#:~:text=Language%3A,result%20of%20PHP%20is%20dynamic.]
                                        [https://www.geeksforgeeks.org/php-vs-html/]
                                        [body{display: flex;align-items:center;justify-content:  center;align-items: center;}]
                                        [https://developer.mozilla.org/en-US/docs/Web/CSS/align-content]
                                        [https://getbootstrap.com/docs/5.0/components/collapse/]
                                        [https://www.youtube.com/watch?v=JGokfRfLPXo] [11/04/2023 23:55] [11/04/2023 23:59]

        [Development Commentary]        Starting over from the very beginning doesn't really feel like it's going to save me
                                        very much time or agony. [New Note] I don't always like centering text, but I only have
                                        DIV titles right now, and I don't really anticipate long bodies of text. [04:09]
                                        [Stack Overflow Question] [just lost my stackoverflowquestionginity] [11/04/2023 23:55]
                                        Bootstrap Carousel Issues, Bootstrap Version 5
                                        I'm new at this, and I hardly know how to put this in the correct terms, 
                                        but basically, I'm making a carousel using Bootstrap 5. [11/04/2023 23:55]
                                        I was able to get the names to carousel toggle, but not the iframes.
                                        kennethlarotyamat.github.io/html/project14v002.html
                                        I was able to do it on a different version of this class project, but 
                                        the "names carousel" toggles with bootstrap, and the iframes toggle with a javascript or jquery mechanism. [11/04/2023 23:55]
                                        https://kennethlarotyamat.github.io/html/project14.html
                                        I have no idea what to do.
                                        I tried having the carousel toggle buttons target 2 different ids: #demo1 
                                        for the names carousel, and #demo2 for the iframes carousel. [11/04/2023 23:55]
                                        i also tried wrapping a button tag around a button tag, so the button that targeted #demo1 (names) was wrapped around another button that targeted #demo2 (iframes). 
                                        neither worked. [11/04/2023 23:55]
                                        Bootstrap Carousel Issues, Bootstrap Version 5
                                        Asked today
                                        Modified today
                                        Viewed 1 time
                                        Report this ad 0
                                        I'm new at this, and I hardly know how to put this in the correct terms, but basically, 
                                        I'm making a carousel using Bootstrap 5.
                                        I was able to get the names to carousel toggle, but not the iframes.
                                        kennethlarotyamat.github.io/html/project14v002.html [11/04/2023 23:55]
                                        I was able to do it on a different version of this class project, but the "names carousel" toggles with bootstrap, 
                                        and the iframes toggle with a javascript or jquery mechanism.
                                        https://kennethlarotyamat.github.io/html/project14.html
                                        I have no idea what to do.
                                        I tried having the carousel toggle buttons target 2 different ids: #demo1 for 
                                        the names carousel, and #demo2 for the iframes carousel.
                                        i also tried wrapping a button tag around a button tag, so the button that targeted #demo1 (names) was wrapped around another button that targeted #demo2 (iframes).
                                        neither worked.
                                        [Stack Overflow Question] [just lost my stackoverflowquestionginity] [11/04/2023 08:08 AM] [11/04/2023 23:55]

                                        [Resources]                 [https://getbootstrap.com/docs/5.0/components/collapse/]
                                                                    [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls]
                                                                    [https://www.w3schools.com/bootstrap5/bootstrap_carousel.php]

                                        [developemnt notes]

                                        I don't want to resort to this, but I'm ready to just use images, rather than iframes for the carousel, but I'm not
                                        really sure if that's the issue, because if the carousel can toggle a series of names, I'm sure it can toggle a series
                                        [11/06/2023 02:35 AM] [Development Commentary] [686/868 is called "the chestnut ratio 868/686 is called "the hazel ratio"]
                                        of iframes.
                                        <!-- 
        [References]                    [https://codepen.io/shafferma08] [https://codepen.io/marnee] [https://codepen.io/shafferma08/pen/NWERvOr]
                                        [https://codepen.io/shafferma08/pen/KKrjwjL] [https://codepen.io/shafferma08/pen/NWERvOr]
                                        [https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout]
                                        [https://css-tricks.com/snippets/css/a-guide-to-flexbox/]
                                        [https://css-tricks.com/snippets/css/a-guide-to-flexbox/]
                                        [https://www.w3schools.com/bootstrap5/bootstrap_carousel.php]
                                        [https://www.w3schools.com/tags/tag_span.asp] [<script src="https://kennethlarotyamat.github.io/javascript/project14v002.js"></script>]
                                        [ <link rel="stylesheet" href="   https://kennethlarotyamat.github.io/CSS/project14v002.css   "> ]
                                        [class="yellowRight carousel-control-next" type="button" data-bs-target="#demo1,#demo2" data-bs-slide="next"]
                                        [<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next"><span class="hazelText" >Swipe</span><br> <span class="sanguineText" >Right</span> </button>]
                                        [https://codepen.io/shafferma08/pen/KKrjwjL] [https://kennethlarotyamat.github.io/html/project14v004.html] [https://stackoverflow.com/questions/77422567/bootstrap-carousel-issues-bootstrap-version-5]
        
        [Development Commentary]        One of the issues that I had with the carousel, was that I had a different bootstrap version
                                        in place than the documentation example that I was following, I had version 5 active, and the
                                        documentation example used version 3. continue revisions based on the original project.
                                        [C:\Users\KLYam\OneDrive\Documents\GitHub\kennethlarotyamat.github.io\html\project14.html]
                                        a lot of the issues come from clashes that occur between flex, block, and grid display. with
                                        this newer version, I went with all flex. or, the main containers are all flex. [10/04/2023 14:46]
                                        this project took pretty much forever, and it's still not quite finished. [10/05/2023 00:01]
                                        [Development Commentary] [686/868 is called "the chestnut ratio 868/686 is called "the hazel ratio"]
-->


*/
/* it works. now I just need that JSON stuff set up. */

.topThird{display: flex;flex-direction: column;}
.centerThird{display: flex;flex-direction: row;}
.bottomThird{display: flex;flex-direction: column;}
#sliderproject10 iframe {    transition: transform .09s ease-in-out;  }  
.carousel-item{    transition: transform .09s ease-in-out;  }